<template>
	<view class="charts-box">
		<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script setup>
	import { ref,onMounted } from 'vue'
	import apis from '../../api/apis';
	
	const props = defineProps({
	  categories: {
	    type: Array,
	    required: true
	  },
	  name: {
	    type: String,
	    required: true
	  },
	  data: {
	    type: Array,
	    required: true
	  }
	})
	
	const chartData = ref({});
	const opts = {
		color: ["#1890FF"],
		padding: [15, 10, 0, 15],
		dataLabel: false,
		dataPointShape: false,
		enableScroll: false,
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2,
			
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom"
			}
		}
	};

	const getServerData = () => {
		setTimeout(()=>{
			const res = {
				categories: props.categories,
				    series: [
				{
				      name: props.name,
				      linearColor: [
				        [0, "#1890FF"],
				        [0.25, "#00B5FF"],
				        [0.5, "#00D1ED"],
				        [0.75, "#00E6BB"],
				        [1, "#90F489"]
				      ],
				      data: props.data,
				}]
			};
			// console.log("props.data")
			// console.log(props.data)
			chartData.value = JSON.parse(JSON.stringify(res));
			// console.log("chartData.value")
			// console.log(chartData.value)
		},500)
	};

	// onMounted(() => {
		getServerData();
	// });
</script>
<style lang="scss" scoped>
	.charts-box {
		width: 90vw;
		margin: 20rpx auto;
		height: 200px;
		border: 1px solid #ccc;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
	}
</style>